<template>
  <div>
    <h1>退回操作</h1>
    <el-card>
      <div class="user-box mb-5">
        <div class="name-buttons">
          <div class="custom-buttons">
            <div
              v-for="(item, index) in nameList"
              :key="index"
              class="custom-button"
              :class="{ active: judgeObj.name === item.name }"
              @click="toggleName(item)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        stripe
        class="cl-table"
        header-cell-class-name="my-header-cell-row"
        cell-class-name="my-cell-row"
      >
        <el-table-column type="index" width="55" />
        <el-table-column v-for="col in COLUMN_LIST" :key="col.prop" :prop="col.prop" :label="col.label" />
        <el-table-column label="操作" width="250">
          <template #default="{ row }">
            <el-button v-if="row.status !== 3" type="primary" link @click="handleReturn(row)">退回</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import { COLUMN_LIST } from './data'
import { judgesInfo } from '@/api/judgesInfo'
import { getJudgeCompletedList, returnProjectItemInfo } from '@/api/return-operation'
const tableData = ref([])
const nameList = ref<{ name: string; id: string }[]>([])
// 当前选中的评委
const judgeObj = ref<any>({
  name: '',
  id: ''
})
const toggleName = (item) => {
  judgeObj.value = item
  // 切换 展示评委已完成的评审项
  getTableData()
}
onMounted(() => {
  initData()
})
const initData = async () => {
  // 获取评委列表
  const { rows }: any = await judgesInfo(null)
  nameList.value = rows
    .filter((item: any) => item.isAvoid === false)
    .map((item: any) => ({
      name: item.name,
      id: item.id
    }))
  if (nameList.value.length > 0) {
    toggleName(nameList.value[0])
  }
}
const getTableData = async () => {
  // 获取评委已完成的评审项
  const data: any = await getJudgeCompletedList({
    judgeId: judgeObj.value.id
  })
  tableData.value = data
}

/**
 * 退回
 * @param row
 */
const handleReturn = async (row) => {
  ElMessageBox.confirm('确定退回该评审项吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await returnProjectItemInfo({
      judgesId: judgeObj.value.id,
      itemId: row.id
    })
    await getTableData()
  })
}
</script>

<style scoped>
@import url('@/components/cl-table/index.scss');

.custom-buttons {
  display: flex;
  gap: 25px; /* 按钮间距 */
}

.custom-button {
  min-width: 76px;
  padding: 4px 20px;
  border: 2px solid #1890ff;
  border-radius: 8px;
  color: #1890ff;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  user-select: none;
}

.custom-button.active {
  background: #1890ff;
  color: #fff;
  border-color: #1890ff;
}
</style>
